<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name = "author" content="wyrQF">
        <meta name="keywords" content="CGI开发 H5模版 千锋教育 西安物联网">
        <title>HTML5模版-主页</title>
        <!-- 引入外联样式 -->
        <link rel="stylesheet" href="/css/my.css">
        <style>
            /* id选择器 */
            #adiv{
                color: aquamarine;/* 为标签的底部边框修饰  solid 实线  dotted 电线 dashed 虚线*/
                border: 1px dashed blueviolet;
                margin: 10px;
            }
            
            /* 类选择器 */
            .bcdiv{
                border: 5px double salmon;
                margin-top: 10px;
            } 
            /* 后代选择器  直接后代选择器 */
            /* p span 表示p所有的span后代（包括直接和间接的span标签） */ 
            p span{
                background-color: darkmagenta;
                color: palegreen;
                padding: 10px;
                margin: 10px;
            }   
            /* p>span 表示选择p的直接后代的span标签 */
            p>span{
                color: rgb(219, 36, 161);
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <!--  HTML的所有标签都具有id属性
              HTML的所有标签都具有class属性，标识属于某一类的标签  
              id选择器优先于类选择器
        -->
       <div id="adiv" class="bcdiv">A</div>
       <div class="bcdiv">B</div>
       <div class="bcdiv">C</div>
       <!-- 表示一个段落 ，内部不能包含div标签-->
       <p>
            <b>
                <span>1</span><span>2</span><span>3</span>
            </b>
            <span>4</span>
       </p>
    </body>
</html>
